<template>
  <div class="content">
    <div class="contianer" v-loading="active === 5">
      <div class="title">漫画 － {{$route.query.n}}</div>
      <el-steps simple :active="active" finish-status="success">
        <el-step title="新建章节" icon="el-icon-edit"></el-step>
        <el-step title="上传漫画" icon="el-icon-upload"></el-step>
        <el-step title="完成" icon="el-icon-success"></el-step>
      </el-steps>
      <div class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <div v-show="active === 0">
            <el-form-item label="章节序号" prop="chapter" v-if="$route.query.id==null">
              <el-input type="number" v-model="ruleForm.chapter"></el-input>
            </el-form-item>
            <el-form-item label="章节序号" v-if="$route.query.id!=null">
              <el-input type="number" v-model="ruleForm.chapter"></el-input>
            </el-form-item>
            <el-form-item label="章节标题" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
          </div>
          <div v-show="active === 1">
            <el-form-item prop="content">
              <el-upload class="upimg"
                drag
                action="https://upload-z2.qiniup.com"
                :data="postData"
                :on-success="handleAvatarSuccess"
                :limit=1>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-form-item>
            
          </div>
          <div class="protocol" v-show="active === 2">            
            <p class="t">《漫本漫画内容上传协议》</p>
            <p>请务必认真阅读和理解本《漫本漫画内容上传协议》（以下简称“协议”）中规定的所有权利和限制。您（“用户”）一旦注册、登录、使用等行为将视为对本《协议》的接受，即表示您同意接受本《协议》各项条款的约束。如果您不同意本《协议》中的条款，您可以放弃注册、登录或使用本协议所涉及的相关服务。</p>            <p>本《协议》是用户与上海瑛麒动漫科技有限公司（下称“漫本漫画”）之间的法律协议。</p>            <h1>一、定义</h1>            <p>1、“漫本原创漫画发行平台”是指上海瑛麒动漫科技有限公司旗下所属的互联网网站平台（http://www.manben.com）、智能手机及平板电脑的包括但不限于漫画等应用程序及上海瑛麒动漫科技有限公司与第三方网站合作搭建的漫本漫画合作推广专区等网络产品及应用，简称“漫本漫画”。</p>            <p>2、“用户”是指愿意接受本协议，注册成为漫本漫画用户并使用漫本漫画提供的网络服务的个人、单位或任何组织。</p>            <p>3、“转载”是指用户从互联网上收集的、非为用户创作的内容作品发布到漫本漫画的行为。</p>            <p>4、“无授权转载”是指未经著作权人授权，擅自将他人作品发布到漫本漫画的行为。</p>            <p>5、“漫本漫画合作推广专区”系指上海瑛麒动漫科技有限公司以宣传推广用户上传之内容为目的，与第三方网站合作设立的推广专区，通过包括但不限于网页调用等方式调用漫本漫画网站中的内容向第三方网站用户提供阅读和浏览服务，漫本漫画合作推广专区属于漫本漫画网站的一部分。</p>            <h1>二、内容上传</h1>            <p>1、漫本漫画依法禁止出版、传播或者含有下列内容之一的作品：</p>            <p class="item">a 、反对宪法所确定的基本原则的；</p>            <p class="item">b 、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>            <p class="item">c 、损害国家荣誉和利益的；</p>            <p class="item">d 、煽动民族仇恨、民族歧视，破坏民族团结的；</p>            <p class="item">e 、破坏国家宗教政策，宣扬邪教和封建迷信的；</p>            <p class="item">f 、散布谣言，扰乱社会秩序，破坏社会稳定的；</p>            <p class="item">g 、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>            <p class="item">h 、侮辱或者诽谤他人，侵害他人合法权益的；</p>            <p class="item">i 、含有法律、行政法规禁止的其他内容的。</p>            <p>2、内容上传要求：</p>            <p>在漫本漫画中，所上传的内容应遵守以下规定;</p>            <p class="item">a 、用户于漫本漫画所上传的一切内容，均应为漫画作品或与漫画作品相关的图片作品；</p>            <p class="item">b 、上传内容中凡选择标注为“原创”的，用户应保证该内容完全为用户本人独立创作，拥有完整、合法的权利在漫本漫画上传、发布、传播，不得侵犯其他任何第三方的著作权、或其他任何合法权益；</p>            <p class="item">c 、上传内容中凡标注为“转载”的，用户应当保证已经获得著作权人的授权拥有在互联网上发布该等内容的相关权利，或原作者明确声明允许自由转载（此种情况应附相关声明原文）；同时，用户应当标注原作者的署名，如原作者的授权（或允许转载的相关声明原文）中要求的，应当同时标注作品的出处；</p>            <p class="item">e 、用户上传无权发布、传播或侵犯其他任何第三方的著作权或其他任何合法权益的作品的，将被视为漫本禁止的无授权转载行为。</p>            <p class="item">f 、未经漫本漫画书面同意，用户不得在漫本漫画发布任何广告消息。</p>            <p class="item">g、未经漫本事先书面同意，用户不得擅自使用、复制或授权他人使用漫本漫画的商标、标志及其他任何显著性标识。</p>            <h1>三、对于无授权转载的处理</h1>            <p>1、漫本漫画作为信息存储空间、及网络服务提供者，对用户无授权转载行为的发生不具备充分的监控能力。如权利人认为用户上传的内容侵犯其著作权，并向漫本漫画提交书面通知，要求漫本漫画删除该上传内容的，漫本漫画有权删除该上传内容并将该通知书及权利人附交的证据转发给用户。如用户注册时填写的联系方式不明或因其他原因无法转交的，漫本漫画有权将通知书的内容在漫本漫画上公告，视为送达。</p>            <p>2、用户接到漫本漫画转送的通知书后，认为上传的内容未侵犯他人权利的，可以向漫本漫画提交书面说明，要求恢复被删除的上传内容。反通知应当包含下列内容：</p>            <p class="item">a 、用户的真实姓名、联系方式和地址；</p>            <p class="item">b 、要求恢复的上传内容的名称；</p>            <p class="item">c 、不构成侵权的证明材料。</p>            <p>3、漫本漫画收到用户的书面说明后，会立即删除漫本漫画上的公告（如已发布）。漫本漫画有权自主决定是否恢复被删除的上传内容。</p>            <p>4、用户违反本协议的，漫本漫画有权要求用户对漫本漫画因此所遭受到的损失进行赔偿（包括但不限于因此而产生的罚款、赔偿、补偿、违约金、律师费、公证费和诉讼费等费用）。 </p>            <h1>四、免责声明</h1>            <p>1、凡用户上传之内容，版权责任由用户自负，漫本漫画仅提供存放空间并供用户展示之用。漫本漫画有权对上传内容进行筛选，审核，排版，推荐。漫本漫画有权不事先通知用户即撤消或删除上传内容，并无需向用户承担任何责任。</p>            <p>2、漫本漫画不就因用户使用服务引起的或与服务有关的任何意外的、非直接的、特殊的、或间接的损害或请求（包括但不限于因人身伤害、因隐私泄漏、因未能履行包括诚信或合理谨慎在内的任何责任、因过失和因任何其他金钱上的损失或其他损失而造成的损害赔偿）承担任何责任。</p>            <p>3、漫本漫画有权利为宣传漫本漫画之目的使用用户上传的内容，并无需向用户支付任何费用或承担任何责任，但不得以收费方式向公众提供该内容的在线阅读和浏览服务，亦不得在未经用户书面同意的情况下以任何形式授权第三人使用。</p>            <p>4、漫本漫画在宣传推广用户上传的内容（包括但不限于在广告、推荐位、漫本漫画合作推广专区中推广）时，有权同时标注漫本漫画的标识（包括但不限于相关的文字表述、漫本漫画的名称、LOGO等）。</p>            <h1>五、漫本漫画的承诺</h1>            <p>漫本漫画承诺将善意地向第三方宣传和推广用户上传的内容，在未经通知并与用户达成一致前，不会以收费方式向公众提供该内容的线下和/或在线的阅读和浏览服务，或通过向第三方合作伙伴收费的形式向其提供用户上传的内容。</p>            <h1>六、争议解决</h1>            <p>1、本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>            <p>2、如用户与漫本漫画就本协议的内容或其履行发生任何争议，协商不成时，任何一方均可向上海市仲裁委员会申请仲裁，仲裁地点为上海，仲裁裁决是终局的，对双方均有约束力。</p>            <h1>七、其他</h1>            <p>1、漫本漫画未能及时行使本协议项下的权利不应被视为放弃该权利，也不影响在将来行使该权利。</p>            <p>2、漫本漫画在法律允许的最大范围内对本协议拥有解释权与修改权。</p>            <p>3、如用户与上海瑛麒动漫科技有限公司签订了其他书面合同的，本协议作为该书面合同的一部分，与该书面合同具同等效力；该书面合同与本协议规定不一致的，适用书面合同的规定。</p>            <div class="toolBar"><a href="javascript:window.close();"></a></div>        
          </div>
          <div v-show="active === 3">
            <el-form-item label="存稿／发布" prop="flag">
              <el-switch v-model="ruleForm.flag"></el-switch>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button style="margin: 40px 0 20px -70px" @click="prev()">上一步</el-button>
            <el-button @click="submitForm('ruleForm')">{{btntext}}</el-button>
          </el-form-item>  
        </el-form>
        <img v-if="imageUrl && active===1" :src="imageUrl" style="width:800px" class="avatar">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容！'))
        } else {
          callback()
        }
      }
      return {
        section: {},
        User: {},
        postData: {
          token: '-wB7gbMbeR_0yOZ_Pige0M_YtUHPTBsggN6fj6lB:O5c_Nj6pxed4S1mDw7oUbfq9ey0=:eyJzY29wZSI6ImNyaXNtIiwiZGVhZGxpbmUiOjE1MjA5NzM3MTJ9'
        },
        imageUrl: '',
        active: 0,
        btntext: '下一步',
        ruleForm: {
          flag: false
        },
        rules: {
          chapter: [
            { required: true, message: '请输入漫画序号', trigger: 'blur' },
            { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入章节名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          content: [
           { required: true, validator: validateUserName, trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.User = JSON.parse(sessionStorage.getItem('u'))
      if (this.User === null){
        this.$router.push('/login')
      }
      if (this.$route.query.id != null){
        this.getData(this.$route.query.id)
      }
    },
    methods: {
      getData(id) {
        var _this = this
        this.$ajax.post('/api/getSectionById?id='+id).then(function(response){
          console.log(response.data)
          if(response.data.code === 0) {
            _this.section = response.data.data
            _this.ruleForm = _this.section
            _this.imageUrl = _this.section.content
          }
        }).catch(function(error){console.log(error)})
      },
      handleAvatarSuccess (res, file) { // 上传成功后在图片框显示图片
        this.imageUrl = 'http://p24hjnsdi.bkt.clouddn.com/' + res.key
      },
      handleError (res) { // 显示错误
        console.log(res)
      },
      next() {
        if (++this.active >= 3) this.btntext = '提交'
        else this.btntext = '下一步'
        if (this.active > 4) this.active = 4
      },
      prev() {
        if (this.active >= 3)
          this.active = 2
        else if (this.active <= 0)
          this.active = 0
        else
          this.active--
        this.btntext = '下一步'
      },
      submitForm(formName) {
        if (this.active === 1)
        {
          this.ruleForm.content = this.imageUrl
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.next()
          } else {
            return false
          }
        })
        if (this.active === 4) {
          console.log(this.ruleForm)
          var _this = this
          this.$ajax.post('/api/addSection?id='+_this.$route.query.cid,_this.ruleForm).then(function(response){
            console.log(response.data)
            _this.$router.push('/comic')
          }).catch(function(error){console.log(error)})
          _this.active = 5
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style lang='stylus' rle='stylesheet/stylus'>
.el-radio+.el-radio
  margin-left 17px
.upimg
  width 600px
  .el-upload-dragger
    width 600px
.contianer
  width 1000px
  margin 0 auto
  margin-top 20px
  .title
    font-size 26px
    margin-bottom 20px
  .form
    width 800px
    margin 40px 0 0 80px
</style>
